<script setup>
import {computed} from "vue"

const props = defineProps({
    width: {type: [String, Number], default: () => 100},
    height: {type: [String, Number], default: () => 100},
    src: {type: String, default: () => ""},
})


const fullPath = computed(() => {
    if (!props.src) return null
    if (props.src.indexOf("http") > -1) {
        return props.src
    }
    return `${window.$config.baseUrl}/${props.src}`
})
function showBig() {
    const width = 500;
    const height = 600;
    const left = (document.documentElement.clientWidth - width) / 2;
    window.open(fullPath.value, "", `width=${width}, height=${height}, left=${height}, top=160`)
}
</script>

<template>
    <template v-if="fullPath">
        <div :style="{width: width + 'px', height: height + 'px'}" class="g-preview-image-container" @click="showBig">
            <img :src="fullPath" class="g-preview-image">
        </div>
    </template>

</template>

<style lang="scss" scoped>
.g-preview-image-container {
    display: inline-flex;
    min-height: 100%;
    margin: 2px auto;
}
.g-preview-image {
    width: 100%;
    height: 100%;
    cursor: zoom-in;
    border-radius: 4px;
    object-fit: cover;
}

.big-image-container {
    width: 100%;
    max-height: 500px;
    overflow: auto;

    .big-image {
        width: 100%;
        height: auto;
    }
}

</style>
